<template>
    <div class="steps-page">
        <div
            class="steps-item"
            v-for="(item, index) in list"
            :key="index"
            :class="{
                done: value > index + 1,
                doing: value == index + 1,
                warn: item.error && value > index + 1,
            }"
        >
            <div class="steps-index" @click="onStep(index)">
                <i
                    class="iconfont icon-exclaimination"
                    v-if="item.error && value > index + 1"
                ></i>
                <i
                    class="iconfont icon-check"
                    v-else-if="!item.error && value > index + 1"
                ></i>
                <span v-else>{{ index + 1 }}</span>
                <div
                    class="steps-border"
                    v-if="item.error && value > index + 1"
                />
                <div
                    class="steps-border"
                    v-if="!item.error && value > index + 1"
                />
            </div>
            <div class="steps-title">{{ item.title }}</div>
            <div class="steps-decs">{{ item.desc }}</div>
        </div>
    </div>
</template>
<script setup>
import { ref } from "vue";

const props = defineProps({
    value: {
        type: Number,
        default: () => 1,
    },
    //title 标题、error 错误状态、decs 描述
    list: {
        type: Array,
        default: () => [],
    },
});

const emits = defineEmits(["update:value"]);

//点击步骤
const onStep = (index) => {
    emits("update:value", index + 1);
};
</script>
<style lang="less" scoped>
.steps-page {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 40px;
    gap: 0 20px;
    .steps-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        position: relative;
        color: var(--text-color-base);
        &::after {
            content: "";
            position: absolute;
            height: 1px;
            width: 70%;
            background: var(--border-color);
            top: 22px;
            left: 30%;
            transform: translateX(50%) scaleY(0.5);
        }
        &:last-child::after {
            display: none;
        }
        i {
            animation: iconAnimate 0.5s ease-in-out;
        }
        .steps-index {
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            cursor: pointer;
            margin-bottom: 6px;
            box-sizing: border-box;
            position: relative;
            color: var(--text-color-base);
            span {
                font-size: 20px;
                color: var(--text-color-base);
            }
            .steps-border {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                border: 2px solid #fff;
                box-shadow: 0px 0px 2px var(--border-color);
                border-radius: 50%;
                animation: borderAnimate 0.5s ease-in-out;
            }
        }
        &:not(.done, .doing, .warn) {
            .steps-index {
                border: 1px solid var(--border-color);
            }
        }
        &.done {
            .steps-index {
                .steps-border {
                    border: 2px solid var(--success-color);
                    box-shadow: 0px 0px 2px var(--success-color);
                }
                i {
                    color: var(--success-color);
                    font-size: 28px;
                }
            }
        }
        &.doing {
            .steps-index {
                .steps-border {
                    border: 2px solid var(--primary-color);
                    box-shadow: 0px 0px 2px var(--primary-color);
                }
                background: var(--primary-color);
                span {
                    color: #fff;
                }
            }
        }
        &.warn {
            .steps-index {
                .steps-border {
                    border: 2px solid var(--error-color);
                    box-shadow: 0px 0px 2px var(--error-color);
                }
                i {
                    color: var(--error-color);
                }
            }
            .steps-title,
            .steps-decs {
                color: var(--error-color);
            }
        }
        .steps-title {
            font-size: 16px;
            color: var(--text-color-base);
        }
        .steps-decs {
            font-size: 13px;
            color: var(--text-color-base-2);
            text-align: center;
        }
    }
}
@keyframes iconAnimate {
    0% {
        transform: scale(1.15);
    }
    50% {
        transform: scale(0.85);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes borderAnimate {
    0% {
        transform: scale(1.05);
    }
    50% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}
</style>
